<template>
    <div class="DetailHead">
        <img :src="bannerImg" alt="" @click="handleClick">
        <router-link to="/" tag="i" class="iconfont back">&#xe63c;</router-link>
        <div class="head-text">
            <div class="icon-img">
                <i class="iconfont tu">&#xe624;</i>
                <span>34</span>
            </div>
            <p>知音号游船</p>
        </div>
    </div>
</template>
<script>
export default {
    name:"DetailHead",
    props:{
        bannerImg:{
            type:String
        }
    },
    methods:{
        handleClick(){
            this.$emit("handleShow")
        }
    }
}
</script>
<style lang="scss" scoped>
    .DetailHead{
        color: #fff;
        position: relative;
        img{
            width: 100%;
            height: 400px;
        };
        .back{
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 40px;
        };
        .head-text{
            position: absolute;
            bottom: 40px;
            left: 40px;
            .icon-img{                
                background: #999;
                width: 100px;
                line-height: 40px;
                border-radius: 20px;
                padding:0 15px;
                .tu{
                    font-size: 30px;
                    margin-right: 15px;
                }
            }
        }
    }
</style>

